<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="home">
{
  layout: 'default',
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '首页',
  },
}
</route>

<script lang="ts" setup>
// import type { UniNamespace } from 'uni-app'
import { ref } from 'vue'

// 导入模块组件
import HomeBanner from './components/banner.vue'
import HomeCategories from './components/categories.vue'
import HomeModules from './components/modules.vue'
import HomeProducts from './components/products.vue'

defineOptions({
  name: 'Home',
})

// 获取屏幕边界到安全区域距离
let safeAreaInsets: any = null
let systemInfo: any = null

// #ifdef MP-WEIXIN
// 微信小程序使用新的API
systemInfo = uni.getWindowInfo()
safeAreaInsets = systemInfo.safeArea
  ? {
      top: systemInfo.safeArea.top,
      right: systemInfo.windowWidth - systemInfo.safeArea.right,
      bottom: systemInfo.windowHeight - systemInfo.safeArea.bottom,
      left: systemInfo.safeArea.left,
    }
  : null
// #endif

// #ifndef MP-WEIXIN
// 其他平台继续使用uni API
systemInfo = uni.getSystemInfoSync()
safeAreaInsets = systemInfo.safeAreaInsets
// #endif
// https://ukw0y1.laf.run

// 分类状态管理
const currentCategory = ref('')
const isPopular = ref(true)

// 搜索功能
function handleSearch(value: string) {
  console.log('搜索内容:', value)
  // TODO: 实现搜索逻辑
}

// 分类变化处理
function handleCategoryChange(categoryName: string, popular: boolean) {
  currentCategory.value = categoryName
  isPopular.value = popular
}

// 触底加载更多
function onReachBottom() {
  // 触底事件会传递给子组件处理
  console.log('触底加载更多')
}
</script>

<template>
  <view class="min-h-screen bg-gray-50" :style="{ marginTop: `${safeAreaInsets?.top}px` }">
    <!-- Banner 模块 -->
    <HomeBanner @search="handleSearch" />

    <!-- 五个栏目图标模块 -->
    <HomeModules />

    <!-- 产品类别模块 -->
    <HomeCategories @category-change="handleCategoryChange" />

    <!-- 产品列表模块 -->
    <HomeProducts :category-name="currentCategory" :is-popular="isPopular" />
  </view>
</template>
